<template>
  <el-drawer
    :title="row.name"
    :visible.sync="visibleDrawer"
    :show-close="false"
    :before-close="handleClose"
    direction="rtl"
    size="600px"
  >
    <div style="padding: 5px" :focus="true">
      <el-tree
        ref="tree"
        :data="row.authorityTree"
        default-expand-all
        node-key="code"
        highlight-current
        :props="props"
      />
    </div>
  </el-drawer>
</template>

<script>
import Role from '@/api/entity/Role'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    row: {
      type: Role,
      required: true
    }
  },
  data() {
    return {
      props: {
        label: 'name',
        children: 'nodes'
      }
    }
  },
  computed: {
    visibleDrawer: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    handleClose() {
      this.visibleDrawer = false
    }
  }
}
</script>
